<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-07-08 08:45:18
 * @LastEditors: hongweixun
 * @LastEditTime: 2022-07-12 10:16:43
-->
<template>
  <el-row
    class="result-flex-box"
    :style="'height:' + (innerHeight - 150) + 'px;'"
  >
    <el-col :span="24">
      <div>
        <div class="svg-flex-box">
          <div class="name-title-box">初中部实时人数统计</div>
          <svg-icon icon-class="left_biaoti_bg" className="left-biaoti-bg-box">
          </svg-icon>
          <svg-icon icon-class="left_xiantiao" className="left-xiantiao-box">
          </svg-icon>
        </div>
        <div
          class="common-bg-box"
          :style="'height:' + (innerHeight - 200) + 'px;'"
        >
          <el-row style="height:100%;" :gutter="40">
            <el-col :span="12" style="height:100%;">
              <div class="column" style="height:100%;">
                <div class="flex-1">
                  <div class="flex1-bg-box row">
                    <!-- <div
                      style="width:100%;height: 100%;position: absolute;top: 0;left: 0;"
                    >
                      <svg-icon icon-class="bg_jzg" className="bg_jzg-box">
                      </svg-icon>
                    </div> -->
                    <div style="width:250px;">
                      <svg-icon
                        icon-class="jiazhiguan"
                        className="jiazhiguan-box"
                      >
                      </svg-icon>
                    </div>
                    <div class="column jiazhiguan-flex-box">
                      <div
                        style="color:#4DFFFF;font-size:30px;letter-spacing: 0.5rem;"
                      >
                        社会主义核心价值观 ///
                      </div>
                      <div class="country-flex-box">
                        富强 民主 文明 和谐
                        <span style="margin-left:30px;"
                          >自由 平等 公正 法治</span
                        >
                        <div style="margin-top:15px;">爱国 敬业 诚信 友善</div>
                      </div>

                      <svg-icon
                        icon-class="line_jiazhiguan"
                        className="line_jiazhiguan-box"
                      >
                      </svg-icon>
                    </div>
                  </div>
                </div>
                <div class="flex-3">
                  <div class="student-message-box row">
                    <div class="circle-bg-box"></div>
                    学生信息<dv-decoration-1 style="width:200px;height:30px;" />
                  </div>
                  <!-- 内容 -->
                  <div class="msg-flex-box">
                    <el-row class="msg-row-flex">
                      <el-col class="col-common-box">
                        <svg-icon
                          icon-class="icon_name"
                          className="svg-common-row"
                        >
                        </svg-icon
                        >学生姓名：
                        <div>王佳琪</div>
                      </el-col>
                      <el-col class="col-common-box">
                        <svg-icon
                          icon-class="icon_school"
                          className="svg-common-row"
                        >
                        </svg-icon
                        >校门出入：
                        <div style="color:#09b79c;font-weight: bold;">入校</div>
                      </el-col>
                      <el-col class="col-common-box">
                        <svg-icon
                          icon-class="icon_class"
                          className="svg-common-row"
                        >
                        </svg-icon
                        >班级名称：
                        <div>初中部-2020级-02班</div>
                      </el-col>
                      <el-col class="col-common-box">
                        <svg-icon
                          icon-class="icon_time"
                          className="svg-common-row"
                        >
                        </svg-icon
                        >刷卡时间：
                        <div>2022-04-21 04:16:19</div>
                      </el-col>
                    </el-row>
                    <svg-icon
                      icon-class="studen_mess"
                      className="studen_mess-box"
                    >
                    </svg-icon>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12" style="height:100%;position: relative;">
              <div class="right-flex-box">
                <!-- title -->
                <div class="title-animal-box">
                  <div class="border-box-view row">
                    <svg-icon icon-class="rotate" className="rotate-box">
                    </svg-icon>
                    <svg-icon
                      icon-class="icon_fangxing"
                      className="icon_fangxing-box"
                    >
                    </svg-icon>
                    <div
                      style="font-size:24px;color:#45e3ed;margin-left: 30px;font-weight: bold;"
                    >
                      放行说明
                    </div>
                    <div
                      style="font-size:40px;color:#f64d28;margin-left: 40px;"
                    >
                      禁止入校!
                    </div>
                  </div>
                </div>
                <!-- right-line -->
                <svg-icon icon-class="right_line" className="right_line-box">
                </svg-icon>
                <div
                  class="row"
                  style="padding-left:40px;margin-top: 40px;color: #fff;font-size: 28px;display: flex;align-items: center;"
                >
                  <!-- <dv-decoration-10 style="width:80%;height:5px;" /> -->
                  现场抓拍照片<dv-decoration-1
                    style="width:200px;height:30px;"
                  />
                </div>
                <div style="padding:0 40px;">
                  <div class="right-bg-box">
                    <el-image
                      v-if="false"
                      fit="cover"
                      src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                      lazy
                    ></el-image>
                    <div class="none-agree-box v-else">
                      <el-steps :active="2" align-center>
                        <el-step
                          :title="'步骤' + index + 1"
                          v-for="(item, index) in 3"
                          :key="index"
                          description="这是一段很长很长很长的描述性文字"
                        >
                          <template slot="title">
                            <div style="font-size:18px;">
                              王佳琪（家长）
                            </div>
                          </template>
                          <template slot="description">
                            <div
                              style="font-size:18px;"
                              :style="
                                index == 1
                                  ? 'color: #f65543;font-weight:bold;'
                                  : ''
                              "
                            >
                              {{ index == 1 ? '已驳回' : '03.29 10:30' }}
                            </div>
                          </template>
                          <template slot="icon">
                            <el-image
                              fit="cover"
                              src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg"
                              lazy
                            ></el-image>
                          </template>
                        </el-step>
                      </el-steps>
                      <!-- 详细信息 -->
                      <el-row style="margin-top:40px;">
                        <el-col
                          :span="24"
                          style="margin-bottom:30px;"
                          class="row"
                        >
                          <el-row
                            class="row"
                            style="width:100%;display: flex;align-items: center;"
                            :gutter="30"
                          >
                            <el-col
                              :span="6"
                              style="font-size:20px;color:#BEFFFF;text-align: right;"
                            >
                              学生请假时间:
                            </el-col>
                            <el-col
                              :span="18"
                              style="color:#fff;font-size:20px;"
                            >
                              2022.03.30 10:30 ~ 2022.03.31 18:00
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="24" style="margin-bottom:30px;">
                          <el-row
                            class="row"
                            style="width:100%;display: flex;align-items: center;"
                            :gutter="30"
                          >
                            <el-col
                              :span="6"
                              style="font-size:20px;color:#BEFFFF;text-align: right;"
                            >
                              学生返校审批:
                            </el-col>
                            <el-col
                              :span="18"
                              style="color:#f65543;font-size:20px;font-weight: bold;"
                            >
                              已驳回
                            </el-col>
                          </el-row>
                        </el-col>
                        <el-col :span="24">
                          <el-row
                            class="row"
                            style="width:100%;display: flex;"
                            :gutter="30"
                          >
                            <el-col
                              :span="6"
                              style="font-size:20px;color:#BEFFFF;text-align: right;"
                            >
                              驳回理由:
                            </el-col>
                            <el-col
                              :span="18"
                              style="color:#fff;font-size:20px;text-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;"
                            >
                              未上传医学证明未上传医学证明未上传医学证明未上传医学证明未上传医学证明未上传医学证明未上传医学证明
                            </el-col>
                          </el-row>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
                <svg-icon
                  icon-class="fangxingshuoming"
                  className="fangxingshuoming-box"
                >
                </svg-icon>
              </div>
            </el-col>
          </el-row>
          <div class="svg-view-box">
            <svg-icon icon-class="line_xiajiao" className="left-xiantiao-box">
            </svg-icon>
          </div>
          <div class="svg-view-box2">
            <svg-icon
              icon-class="zuobian_tiantiao"
              className="zuobian-tiantiao-box"
            >
            </svg-icon>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
<script>
// import $util from '../util/util'
export default {
  name: 'Home',
  data () {
    return {
      timer: null,
      innerHeight: window.innerHeight
    }
  },
  mounted () {
    this.timer = setTimeout(() => {
      this.$router.push('/')
    }, 60000)
  },
  destroyed () {
    clearTimeout(this.timer)
  }
}
</script>
<style lang="less" scoped>
.result-flex-box {
  .svg-flex-box {
    position: relative;
    .name-title-box {
      font-size: 20px;
      width: 280px;
      text-align: center;
      color: #fff;
      position: absolute;
      top: 12px;
    }
    .left-biaoti-bg-box {
      width: 337px;
      height: 49px;
      margin-left: -4px;
      margin-bottom: -2px;
      color: #fff;
    }

    .left-xiantiao-box {
      width: 150px;
      margin-left: -10px;
      margin-bottom: -5px;
    }
  }
  .svg-view-box {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 5px;
    top: 55px;
    transform: rotate(270deg);
    .left-xiantiao-box {
      font-size: 80px;
      position: absolute;
      bottom: 0;
    }
  }
  .svg-view-box2 {
    width: 80px;
    height: 80px;
    position: absolute;
    left: 5px;
    top: 55px;
    .zuobian-tiantiao-box {
      font-size: 120px;
      position: absolute;
      //   bottom: 0;
    }
  }
  .common-bg-box {
    border: 4px solid #1c42cc;
    height: 100%;
    padding: 40px;
    box-sizing: border-box;
    .flex-1 {
      padding: 0 20px;
      .flex1-bg-box {
        height: 100%;
        box-sizing: border-box;
        position: relative;
        background: rgba(19, 45, 138, 1);
        border: 1px solid rgba(77, 255, 255, 0.1);
        // background-image: url('../assets/icon/svg/bg_jzg.svg');
        // background-size: 100% 100%;
        .bg_jzg-box {
          width: 100%;
          height: 100%;
        }
        .jiazhiguan-box {
          height: 100%;
          width: 145px;
        }
        .jiazhiguan-flex-box {
          width: 100%;
          padding: 20px 0;
          box-sizing: border-box;
          position: relative;
          // padding-left: 40px;
          .country-flex-box {
            color: #fff;
            font-size: 24px;
            padding-top: 15px;
          }
          .line_jiazhiguan-box {
            font-size: 200px;
            position: absolute;
            right: 0;
            top: -11px;
          }
        }
      }
    }
    .flex-3 {
      padding: 0 20px;
      .student-message-box {
        font-size: 28px;
        color: #fff;
        display: flex;
        align-items: center;
        padding: 15px 0;
        padding-top: 25px;
        .circle-bg-box {
          background-color: #0068e8;
          width: 20px;
          height: 20px;
          margin-right: 20px;
        }
      }
      .msg-flex-box {
        height: calc(100% - 50px);
        position: relative;
        padding: 40px;
        box-sizing: border-box;
        .studen_mess-box {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .msg-row-flex {
          padding: 30px;
          height: 100%;
        }
      }
    }
  }
}
.svg-common-row {
  font-size: 32px;
  margin-right: 15px;
}
.col-common-box {
  border-bottom: 1px solid #2b42b7;
  padding: 30px 0;
  color: #beffff;
  font-size: 28px;
  display: flex;
  flex-direction: row;
  align-items: center;
  div {
    margin-left: 30px;
    color: #fff;
  }
}
.right-flex-box {
  height: 100%;
  padding: 70px 30px;
  box-sizing: border-box;
  .fangxingshuoming-box {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }
  .icon_fangxing-box {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 120px;
  }
  .title-animal-box {
    height: 100px;
    padding: 0 40px;
    .border-box-view {
      height: 100%;
      background-color: #132472;
      border-radius: 100px;
      display: flex;
      align-items: center;
      .rotate-box {
        height: 100px;
        width: 100px;
        animation: fadenum 4s linear infinite;
      }
    }
  }
}
.right_line-box {
  width: 100%;
  margin-top: 40px;
  padding: 0 40px;
  box-sizing: border-box;
}
.right-bg-box {
  height: calc(50vh - 130px);
  margin-top: 30px;
  border-radius: 10px;
  background: #132472;
  // padding: 30px;
  box-sizing: border-box;
  .el-image {
    height: 100%;
    width: 100%;
    border-radius: 10px;
  }
}
.none-agree-box {
  padding: 40px;
  box-sizing: border-box;
}
</style>
<style lang="less">
.el-step__icon {
  width: 44px;
  height: 44px;
  .el-image__inner {
    border-radius: 50%;
  }
}
.el-step.is-horizontal .el-step__line {
  height: 10px;
  top: 16px;
}
.el-step__line-inner {
  height: 5px !important;
  border-width: 5px !important;
}
.is-finish {
  .el-step__icon.is-text {
    animation: Glow2 1.5s ease infinite alternate;
  }
}
.el-step__head.is-finish {
  color: #4dffff;
  border-color: #4dffff;
}
.el-step__line {
  background-color: #162d83;
}
.is-process {
  color: #fff !important;
}
.el-step__title.is-finish {
  color: #aabcff !important;
}
.el-step__description.is-finish {
  color: #aabcff !important;
}
</style>
